<template>
	<scroll-view enable-back-to-top @scrolltolower="onScrolltolower" class="viewport" scroll-y>
		<view class="signup">
			<!-- 搜索框和搜索按钮 -->
			<view class="search-bar">
				<input v-model="pageParams.keyword" class="search-input" placeholder="搜索" />
				<button class="search-button" @tap="search">搜索</button>
			</view>
			<view class="filter-container">
				<!-- 位置 -->
				<picker mode="selector" :range="locations" @change="onLocationChange">
					<view class="filter-item">
						<text> {{ selectedLocation }}</text>
					</view>
				</picker>

				<!-- 价格 -->
				<picker mode="selector" :range="prices" @change="onPriceChange">
					<view class="filter-item">
						<text> {{ selectedPrice }}</text>
					</view>
				</picker>

				<!-- 户型 -->
				<picker mode="selector" :range="types" @change="onTypeChange">
					<view class="filter-item">
						<text> {{ selectedType }}</text>
					</view>
				</picker>
				<!-- 更多 -->
				<picker mode="selector" :range="sort" @change="onSelectSort">
					<view class="filter-item">
						<text> {{ selectedSort }}</text>
					</view>
				</picker>
			</view>
			<view class="item-container" @tap="goRouter(item.contractId)" v-for="(item, index) of houseRecommendList"
				:key="index">
				<!-- 图片 -->
				<image class="item-image" :src="item.image[0]" mode="aspectFill"></image>

				<div class="left-item">
					<!-- 标题 -->
					<view class="item-title">{{ item.contractType }}</view>

					<!-- 描述 -->
					<view class="item-description">{{ item.description }}</view>

					<!-- 特点 -->
					<view class="item-feature-box">
						<!-- <view class="item-feature" v-for="(feature, index) in item.features" :key="index">
						{{feature}}
					</view> -->
						<view class="item-feature">
							{{ item.nature }}
						</view>
						<view class="item-feature">
							{{ item.usageArea }}m²
						</view>
					</view>

					<!-- 价格 -->
					<view class="item-buttom">
						<view class="item-price">{{ item.price }}</view>
						<view class="item-unit">元/月</view>
					</view>
				</div>

				<!-- 分割线 -->
				<view class="item-divider"></view>

			</view>
			<view class="loading-text" ref="test">
				{{ finish ? '没有更多数据~' : '正在加载...' }}

			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
import { getHomehouseRecommendListAPI } from '../../services/home'
import type { HouseDetailsPage, PageParams } from '/@/types/global'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app';
import {
	useSearchStore
} from '../../stores';


const searchStore = useSearchStore();
// // 分页参数
const pageParams = ref<PageParams>({
	pageNum: 1,
	pageSize: 6,
	nature: '',
	orderBy: '',
	minPrice: null,
	maxPrice: null,
	keyword: ''
})

const locations = ref(['北京', '上海', '广州', '深圳']);
const prices = ref(['0-1000', '1000-2000', '2000-3000', '3000-4000', '4000+']);
const types = ref(['一室一厅', '两室一厅', '三室一厅', '四室及以上']);


const selectedLocation = ref('位置');
const selectedPrice = ref('价格');
const selectedType = ref('类型');
const selectedSort = ref('排序');
const sort = ref(['总收藏数', '总浏览数', '日浏览数','最近更新']);

function onLocationChange(e: any) {
	console.log(e);
	selectedLocation.value = locations.value[e.detail.value];
}
const onSelectSort = (e: any) => {
	console.log(e.detail.value);
    const sortOption = sort.value[e.detail.value];
    selectedSort.value = sortOption;
	
	pageParams.value.orderBy = (sortOption == '最近更新') ? "create_date desc" : pageParams.value.orderBy;
    pageParams.value.orderBy = (sortOption == '总收藏数') ? "collect_count desc" : pageParams.value.orderBy;
    pageParams.value.orderBy = (sortOption == '日浏览数') ? "view_day desc" : pageParams.value.orderBy;
	pageParams.value.orderBy = (sortOption == '总浏览数') ? "view_all desc" : pageParams.value.orderBy;

    console.log(pageParams.value);
    resetData();
    getHomehouseRecommendListData();
};
function onPriceChange(e: any) {
	selectedPrice.value = prices.value[e.detail.value];
	if (selectedPrice.value.includes('+')) {
		pageParams.value.minPrice = 4000;
		pageParams.value.maxPrice = 20000;

	} else {
		const [min, max] = selectedPrice.value.split('-');
		pageParams.value.minPrice = Number(min);
		pageParams.value.maxPrice = Number(max);
	}
	resetData();
	getHomehouseRecommendListData();

}

function onTypeChange(e: any) {
	selectedType.value = types.value[e.detail.value];
	pageParams.value.nature = selectedType.value;
	resetData();
	getHomehouseRecommendListData();
}





// 滚动触底事件
const onScrolltolower = () => {
	getHomehouseRecommendListData();
	// test.value?.getMore()
}
const houseRecommendList = ref<HouseDetailsPage[]>([])
// 已结束标记
const finish = ref(false)
// // 获取推荐房源数据
const getHomehouseRecommendListData = async () => {
	// 退出分页判断
	if (finish.value === true) {
		return uni.showToast({ icon: 'none', title: '没有更多数据~' })
	}

	const res = await getHomehouseRecommendListAPI(pageParams.value)

	// // 数组追加
	houseRecommendList.value.push(...res.data.list)

	// 分页条件
	if (res.data.list.length === pageParams.value.pageSize) {
		// 页码累加
		if (pageParams.value.pageNum != undefined) {
			pageParams.value.pageNum++
		}

	} else {
		finish.value = true
	}
}
const search = () => {
	if (pageParams.value.keyword != undefined) {
		if (pageParams.value.keyword.trim()) {
			searchStore.addHistory(pageParams.value.keyword.trim());
			resetData();
			getHomehouseRecommendListData();
		}
	}

};
// // 重置数据
const resetData = () => {
	pageParams.value.pageNum = 1
	houseRecommendList.value = []
	finish.value = false
}
// // 组件挂载完毕
onLoad((option) => {
	if (option != undefined) {
		pageParams.value.keyword = option.query
	}

	getHomehouseRecommendListData()
})
const goRouter = (contractId: number) => {
	console.log(contractId)
	uni.navigateTo({
		url: `/pages/contract/contractDetail?contractId=${contractId}`
	})

}
</script>

<style scoped lang="scss">
.search-bar {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	/* border: 1px solid #ccc; */
	border-radius: 30px;
	background-color: #dfe1e2;
}

.search-input {
	flex: 1;
	margin-left: 11px;
	border-radius: 4px;
	font-size: 16px;
}

.search-button {
	margin-left: 18px;
	border: none;
	border-radius: 31px;
	background-color: #6e7782;
	color: #fff;
	cursor: pointer;
	font-size: 11px;
}

.item-container {
	width: calc(100% - 20px);
	height: 115px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.item-image {
	width: 130px;
	height: 90px;
	margin-right: 10px 0px;
	border-radius: 5px;
	margin-right: 10px;
	margin-left: 10px;
}

.item-address {
	display: flex;
}

.item-title {

	color: #333333;
	font-size: 16px;
	line-height: 20px;

}

.item-description {
	font-size: 12px;
	color: #666;
	margin-bottom: 10px;
}

.item-address {
	font-size: 12px;
	color: #666;
	margin-bottom: 5px;
}

.item-feature-box {
	display: flex;
}

.item-feature {
	font-size: 11px;
	color: rgba(76, 95, 163, 0.698039215686274);
	line-height: 15px;
	width: 50px;
	text-align: center;
	margin: 0 5px;
	background-color: #edeff6;
}

.item-buttom {
	display: flex;
}

.item-price {
	font-size: 16px;
	color: #f00;
	margin-bottom: 5px;
}

.item-unit {
	font-size: 12px;
	color: #666;
}

.item-divider {
	border-top: 1px solid #eee;
	margin-top: 5px;
}

// 加载提示文字
.loading-text {
	text-align: center;
	font-size: 28rpx;
	color: #666;
	padding: 20rpx 0;
}

.filter-container {
	display: flex;
	width: calc(100% - 20px);
	justify-content: space-around;
	margin: auto;
}

picker {
	width: 67px;

}

.filter-item {
	font-size: 14px;
	color: #333;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

}
</style>